{% extends "base.html" %}
{% block content %}
  <h2 class="mb-4"><span class="me-2">🎧</span> DJ Dani BONUS Sets</h2>

  {% if verified %}
    <div class="alert alert-success my-4">
    	Welcome, DJDANI Holder! <span class="text-secondary ms-2">({{ holder_address }})</span>
    </div>
    <p class="mb-3">
    	<img src="{{ url_for('static', filename='img/djdani.png') }}" class="rounded-circle thumb me-3" alt="PFP" width="200"> 
    	<strong>DJ Dani</strong></p>
    <ul class="list-group">

		{% for mp3 in mp3_files %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
        	{{ mp3.title }}
        	<span class="ms-2 text-secondary">({{ mp3.date }})</span>
        	<audio controls>
        		<source src="{{ url_for('static', filename='mp3/' + mp3.filename) }}" type="audio/mpeg">
        		Your browser does not support the audio element.
        	</audio>
        </li>
        {% endfor %}
    </ul>
  {% else %}
    {% if error %}
      <div class="alert alert-danger">{{ error }}</div>
    {% endif %}

    <div class="mb-3">
	    <p>To access this content, please prove you own a 
    	<a href="https://horizon.market/explorer/assets/DJDANI?marketsTab=dispensers" 
	    title="DJDANI - a Bitcoin NFT" target="_blank">DJDANI NFT</a> 
    	by signing the message below with your Bitcoin wallet.</p>
	    <p><small>
	    		<strong>Step 1:</strong>
	    		Copy the "Message to sign" below and paste it into your Bitcoin wallet to sign. 
    			(video: <a href="https://www.youtube.com/watch?v=hWRGZaHQj_A" target="_blank"
	    		title="helpful video showing how to sign a message in a similar web app using freewallet.io">
		    	signing a message</a>)
    		</small>
	    </p>
	    <div class="alert alert-secondary">
    		<strong>Message to sign:</strong><br>
		    <code>{{ message_to_sign }}</code>
    	</div>
	    <p><small>
	    	<strong>Step 2:</strong>
    		Use your wallet or signing tool to sign this message with your BTC address.
		    </small>
	    </p>
    </div>

    <form method="POST">
      <div class="mb-2">
        <input class="form-control" name="address" placeholder="Your BTC Address" required>
      </div>
      <div class="mb-2">
        <input class="form-control" name="signature" placeholder="Signature of the message above" required>
      </div>
      <button class="btn btn-primary">Verify Ownership</button> (takes a hot minute)
    </form>

    <hr>
    <p>Don’t have $DJDANI? Send 0.00005 BTC to this address to receive one token:</p>
    <p>
      <code id="dj-address">bc1q2fglq9j9mmetxe3uf4heta6n62yexpwwssan0u</code>
      <button onclick="copyToClipboard('dj-address')" class="btn btn-sm btn-outline-secondary ms-2">📋</button>
    </p>
    <img src="{{ url_for('get_qrcode', address='bc1q2fglq9j9mmetxe3uf4heta6n62yexpwwssan0u') }}" 
    	class="rounded" width="200" alt="QR Code">

    <script>
      function copyToClipboard(id) {
        const el = document.getElementById(id);
        navigator.clipboard.writeText(el.innerText).then(() => {
          alert("Address copied to clipboard!");
        });
      }
    </script>
  {% endif %}
{% endblock %}
